<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="home/layout::html-head(pageTitle='话题列表 | ' + ${titleSuffix},pageKey=${pageKey},pageDesc=${pageDesc})" />

<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
    <body class="layout-top-nav skin-black-light">
        <div class="wrapper">
            <header class="main-header" th:include="home/layout::main-header">
            </header>
            <!-- Full Width Column -->
            <div id="topicsDetail" class="content-wrapper">
                <div class="container">
                    <!-- Main content -->
                    <section class="content">
                        <div class="col-md-9">
                            <div class="box box-primary">
                                <div class="box-header with-border">
                                    <h3 class="box-title">Read Mail</h3>

                                    <div class="box-tools pull-right">
                                        <a href="#" class="btn btn-box-tool" data-toggle="tooltip" title="Previous"><i class="fa fa-chevron-left"></i></a>
                                        <a href="#" class="btn btn-box-tool" data-toggle="tooltip" title="Next"><i class="fa fa-chevron-right"></i></a>
                                    </div>
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body no-padding">
                                    <div class="mailbox-read-info">
                                        <h3>Message Subject Is Placed Here</h3>
                                        <h5>From: help@example.com
                                            <span class="mailbox-read-time pull-right">15 Feb. 2016 11:03 PM</span></h5>
                                    </div>

                                    <!-- /.mailbox-controls -->
                                    <div class="mailbox-read-message">
                                        <!--<p>Hello John,</p>-->

                                        <!--<p>Keffiyeh blog actually fashion axe vegan, irony biodiesel. Cold-pressed hoodie chillwave put a bird-->
                                            <!--on it aesthetic, bitters brunch meggings vegan iPhone. Dreamcatcher vegan scenester mlkshk. Ethical-->
                                            <!--master cleanse Bushwick, occupy Thundercats banjo cliche ennui farm-to-table mlkshk fanny pack-->
                                            <!--gluten-free. Marfa butcher vegan quinoa, bicycle rights disrupt tofu scenester chillwave 3 wolf moon-->
                                            <!--asymmetrical taxidermy pour-over. Quinoa tote bag fashion axe, Godard disrupt migas church-key tofu-->
                                            <!--blog locavore. Thundercats cronut polaroid Neutra tousled, meh food truck selfies narwhal American-->
                                            <!--Apparel.</p>-->

                                        <!--<p>Raw denim McSweeney's bicycle rights, iPhone trust fund quinoa Neutra VHS kale chips vegan PBR&amp;B-->
                                            <!--literally Thundercats +1. Forage tilde four dollar toast, banjo health goth paleo butcher. Four dollar-->
                                            <!--toast Brooklyn pour-over American Apparel sustainable, lumbersexual listicle gluten-free health goth-->
                                            <!--umami hoodie. Synth Echo Park bicycle rights DIY farm-to-table, retro kogi sriracha dreamcatcher PBR&amp;B-->
                                            <!--flannel hashtag irony Wes Anderson. Lumbersexual Williamsburg Helvetica next level. Cold-pressed-->
                                            <!--slow-carb pop-up normcore Thundercats Portland, cardigan literally meditation lumbersexual crucifix.-->
                                            <!--Wayfarers raw denim paleo Bushwick, keytar Helvetica scenester keffiyeh 8-bit irony mumblecore-->
                                            <!--whatever viral Truffaut.</p>-->

                                        <!--<p>Post-ironic shabby chic VHS, Marfa keytar flannel lomo try-hard keffiyeh cray. Actually fap fanny-->
                                            <!--pack yr artisan trust fund. High Life dreamcatcher church-key gentrify. Tumblr stumptown four dollar-->
                                            <!--toast vinyl, cold-pressed try-hard blog authentic keffiyeh Helvetica lo-fi tilde Intelligentsia. Lomo-->
                                            <!--locavore salvia bespoke, twee fixie paleo cliche brunch Schlitz blog McSweeney's messenger bag swag-->
                                            <!--slow-carb. Odd Future photo booth pork belly, you probably haven't heard of them actually tofu ennui-->
                                            <!--keffiyeh lo-fi Truffaut health goth. Narwhal sustainable retro disrupt.</p>-->

                                        <!--<p>Skateboard artisan letterpress before they sold out High Life messenger bag. Bitters chambray-->
                                            <!--leggings listicle, drinking vinegar chillwave synth. Fanny pack hoodie American Apparel twee. American-->
                                            <!--Apparel PBR listicle, salvia aesthetic occupy sustainable Neutra kogi. Organic synth Tumblr viral-->
                                            <!--plaid, shabby chic single-origin coffee Etsy 3 wolf moon slow-carb Schlitz roof party tousled squid-->
                                            <!--vinyl. Readymade next level literally trust fund. Distillery master cleanse migas, Vice sriracha-->
                                            <!--flannel chambray chia cronut.</p>-->

                                        <!--<p>Thanks,<br>Jane</p>-->
                                        <div id="test-editormd-view2">
                                            <span v-html="content"></span>
                                        </div>

                                    </div>
                                    <!-- /.mailbox-read-message -->
                                </div>
                                <!-- /.box-body -->
                                <!--<div class="box-footer">-->

                                <!--</div>-->
                                <!-- /.box-footer -->
                                <div class="box-footer">
                                    <div class="pull-right">
                                        <button type="button" class="btn btn-default"><i class="fa fa-thumbs-up"></i> 点赞</button>
                                    </div>
                                    <button type="button" class="btn btn-default"><i class="fa fa-trash-o"></i> 删除</button>
                                    <a type="button" class="btn btn-default" th:href="@{/topics/edit/} + ${id}"><i class="fa fa-pencil-square-o"></i> 修改</a>
                                </div>
                                <!-- /.box-footer -->
                            </div>
                            <!-- /. box -->
                        </div>

                        <!-- /.box -->
                        <div class="col-md-3 side-bar">
                            <div class="panel panel-default text-center ">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        作者：jobs
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    <a href="javascript">
                                        <img src="https://lccdn.phphub.org/uploads/avatars/1190_1427466695.png?imageView2/1/w/100/h/100" style="width:80px; height:80px;margin:5px;" class="img-thumbnail">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- /.content -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.content-wrapper -->
            <footer class="main-footer" th:include="home/layout::main-footer" />
        </div>
        <!-- ./wrapper -->
        <th:block th:include="home/layout::main-script" />
        <script th:inline="javascript">
            var appTopics = new Vue({
                el:'#topicsDetail',
                data () {
                    return {
                        content: [[${content}]]
                    }
                },
                created() {
                    this.getData();
                },
                methods:{
                    getData() {
                        var _this = this;
//                        $.post('getTopics',{start:start,pageSize:pageSize},function(response) {
//                            _this.list = response.content;
//                            $('html,body').animate({scrollTop:$('body').offset().top},200);
//                        },'json',_this);
                    }
                }
            });
            testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
                htmlDecode      : "style,script,iframe",  // you can filter tags decode
                emoji           : true,
                taskList        : true,
                tex             : true,  // 默认不解析
                flowChart       : true,  // 默认不解析
                sequenceDiagram : true,  // 默认不解析
            });
        </script>
    </body>
</html>
